<template>
    <el-menu default-active="2-1-1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :router="true" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <h3>{{isCollapse?'后台':'通用管理后台'}}</h3>
      <template v-for="(item, index) in asyncMenu">
       <el-submenu :index="item.path + ''" v-if="item.children"  :router="true" :key="index*30">
         <template slot="title">
           <i :class="item.icon"></i>
           <span slot="title">{{item.label}}</span>
         </template>
         <el-menu-item v-for="(items, indexs) in item.children"
                       :index="items.path"
                       :key="indexs" @click="clickMenu(items)">{{items.label}}</el-menu-item>
       </el-submenu>
       <el-menu-item :index="item.path" v-else  :key="index*2" @click="clickMenu(item)">
         <i :class="item.icon"></i>
         <span slot="title">{{item.label}}</span>
       </el-menu-item>
     </template>
    </el-menu>
</template>

<!--当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件-->
<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    height: 100%;
    border: none;
  }
  h3 {
    text-align: center;
  }
</style>

<script>

export default {
  data() {
    return {}
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(item) {
      this.$store.commit('selectMenu', item);
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapsed;
    },
    asyncMenu() {
      console.log(this.$store.state.tab.menu);
      return this.$store.state.tab.menu;
    }
  }
}
</script>